<template>
  <div>
    御剑乘风来,除魔天地间!
    <Mytable :list="list">
      <template #look="{ row }">
        {{ row.id }}
        <button @click="LookHandle(row)">编辑</button>
        <button @click="del(row.id)">删除</button>
      </template>
    </Mytable>

    <DiaLog :showFlag.sync="showFlag" title="编辑数据">
      <form>
        姓名: <input type="text" v-model="fromData.name" /> <br />
        年龄: <input type="text" v-model="fromData.age" /> <br />
      </form>
      <div>
        <button @click="submit">确认</button>
        <button @click="cancel">关闭</button>
        <button @click="LookHandle()">添加</button>
      </div>
    </DiaLog>
  </div>
</template>
<script>
import Mytable from './components/Mytable.vue'
import DiaLog from './components/Dialog.vue'
export default {
  name: 'app',
  components: {
    Mytable,
    DiaLog
  },
  data () {
    return {
      fromData: {
        name: '',
        age: '',
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 5, max: 11, message: '长度在 5 到 11 个字符', trigger: ['blur', 'change'] }
        ],
      },
      showFlag: false,
      list: [
        { id: 1, name: '妮妮', age: 18 },
        { id: 2, name: '风间', age: 19 },
        { id: 3, name: '小新', age: 17 },
      ],

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    del (id) {
      this.list = this.list.filter(item => item.id != id)
    },

    LookHandle (row) {


      //打开模态框
      this.showFlag = true
      //把 每一项的数据 深拷贝赋值给 fromdata
      this.fromData = JSON.parse(JSON.stringify(row))
    },
    cancel () {
      // this.$emit('update:showFlag', false)
      //关闭 模态框
      this.showFlag = false
    },
    submit () {
      //找到数组中的对应项
      const obj = this.list.find(item => item.id == this.fromData.id)
      //把改掉的数据 赋值给 这一项
      obj.name = this.fromData.name
      obj.age = this.fromData.age
      //关闭 模态框
      this.showFlag = false
      //清空
      this.fromData = {
        name: '',
        age: '',
      }
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
